<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米商城左侧菜单</title>
    <style>
      body {
        background-image: linear-gradient(to right, #fbda8f, #c6fedb);
      }

      body,
      p,
      div,
      ul,
      li {
        margin: 0;
        padding: 0;
      }

      .menu {
        width: 300px;
        background-color: rgba(255, 255, 255, 0.6);
        margin: 70px 150px;
      }

      ul {
        list-style: none;
        padding: 21px 0;
      }

      ul li {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        line-height: 42px;
        height: 42px;
      }

      ul li a {
        text-decoration: none;
        display: block;
        color: #000;
        padding-left: 32px;
        background: url(./images/right-jiantou.png) no-repeat 261px 15px;
      }

      ul li a:hover {
        background-color: #ff6700;
        color: #fffefe;
        background-image: url(./images/right-jiantou2.png);
      }

      ul li span {
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="menu">
      <ul>
        <li>
          <a href="#" title="链接">手机</a>
        </li>
        <li>
          <a href="#" title="链接">电视</a>
        </li>
        <li>
          <a href="#" title="链接">笔记本 平板</a>
        </li>
        <li>
          <a href="#" title="链接">家电</a>
        </li>
        <li>
          <a href="#" title="链接">出行 穿戴</a>
        </li>
        <li>
          <a href="#" title="链接">智能路由器</a>
        </li>
        <li>
          <a href="#" title="链接">电源 配件</a>
        </li>
        <li>
          <a href="#" title="链接">健康 儿童</a>
        </li>
        <li>
          <a href="#" title="链接">耳机 音箱</a>
        </li>
        <li>
          <a href="#" title="链接">生活 箱包</a>
        </li>
      </ul>
    </div>
  </body>
</html>
